<template>
    <div class="TagItem-Comp flex" @mousedown="$emit('mousedown',$event)">
        <div class="left flex align-center justify-center">
            <img :src="props.img" alt="">
        </div>
        <div class="right font-md flex align-center justify-center text-white">
            {{ props.text }}
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import TextImg from '../../../assets/text.png'
const props = defineProps({

    img: {
        type: String,
        default: TextImg
    },
    text: {
        type: String,
        default: '文本'
    }
})
</script>
<style lang="less" scoped>
.TagItem-Comp {
    color: #000;
    width: 146px;
    border-radius: 4px;
    height: 42px;

    .left{
        
        background-color: #f75606;
 
        img{
            padding: 0px 4px;
            width: 28px;
            height: 28px;
        }
    }
    .right{
        width: 100px;
        background-color: #3d424d;
        flex-shrink: 0;

    }
}
</style>